html,body{
  height: 100%;
  margin: 0;
  padding: 0;
}
.box{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.one{
  background-image: url(../img/one_a_bg.png);
}
.arrow{
  position: absolute;
  width: 6vw;
  top: 65vh;
  left: 47vw;
  opacity: 0;
  animation: arrow 1.5s infinite ease-in-out;
}
.btn_s{
  position: absolute;
  width: 20vw;
  top: 80vh;
  left: 40vw;
}
@keyframes arrow {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 5px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, 10px);
  }
}
.two{
  display: none;
  background-image: url(../img/two_bg.png);
}
.header{
  text-align: center;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vw;
}
.header span{
  display: inline-block;
}
.number{
  width: 6vw;
  height: 6vw;
  position: relative;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url(../img/number.png);
}
.number span:nth-child(1){
  position: absolute;
  top: 0.9vw;
  left: 0.7vw;
  width: 3vw;
}
.number span:nth-child(2){
  position: absolute;
  bottom: 0.75vw;
  right: 0.75vw;
  width: 3vw;
}
.progress{
  position: relative;
  width: 40vw;
  height: 2vw;
  margin: 0 2vw;
}
.white{
  position: absolute;
  left: 0;
  width: 40vw;
  height: 1.6vw;
  background-color: #fff;
  border-radius: 1vw;
}
.yellow{
  position: absolute;
  width: 40vw;
  height: 1.6vw;
  background-color: rgb(143,195,31);
  border-radius: 1vw;
  left: 0;
}
.time::after{
  content: 's'
}
.type{
  color: #fff;
  text-align: center;
}
.type span{
  color: #f5bd23;
}
.title{
  padding: 2vw 10vw 4vw 10vw;
  color: #fff;
  font-size: 2vw;
}
.opt{
  position: relative;
}
.op{
  width: 30vw;
  background-color: #fff;
  height: 12vw;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #001d57;
  position: absolute;
  border-radius: 1vw;
}
#A{
  top: 0;
  left: 10vw;
}
#B{
  top: 0;
  right: 10vw;
}
#C{
  top: 20vw;
  left: 10vw;
}
#D{
  top: 20vw;
  right: 10vw;
}
#pic{
  display: none;
}
.pic > .op{
  width: 20vw;
}
.pic > #pic{
  position: absolute;
  top: 0;
  left: 32vw;
  width: 36vw;
  height: 32vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pic > #pic img{
  max-width: 100%;
  padding: 1vw;
  border: 1px solid rgba(220, 220, 220, 0.9);
}
.yn{
  display: none;
}
.yns{
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.yes{
  width: 16vw;
  display: none;
}
.no{
  width: 16vw;
  display: none;
}
.addScore{
  position: absolute;
  bottom: 6vw;
  width: 20vw;
  left: 38vw;
  display: none;
}
.addS{
  position: absolute;
  bottom: 14vw;
  width: 8vw;
  left: 42vw;
  /* border: 1px solid #000; */
  font-weight: bold;
  font-size: 2vw;
  color: #fff;
  text-align: center;
  display: none;
}
.addS::before{
  content: '+ ';
}
.mask{
  display: none;
}
.three{
  display: none;
  background-image: url(../img/three_bg.png);
  background-size: contain;
  background-position: center;
  background-color: #063492;
}
.score{
  position: absolute;
  top: 28vw;
  width: 30vw;
  left: 35vw;
  color: #fff;
  font-size: 4vw;
  text-align: center;
}
.btn_r{
  position: absolute;
  bottom: 4vw;
  width: 16vw;
  left: 42vw;
}